THREEJS

⾃定义曲线绘制

今天来给⼤家分享⼀个⾃定义曲线绘制的demo，这个demo主要是结合⿏标在三维空间点击的焦点获取、new

THREE.CatmullRomCurve3（）对象等。

1. 

我们需要在三维的scene内，监听⿏标的点击事件，绘制曲线的前提，需要⼀个平⾯，所以我们先在三维场景构建⼀个看不见的虚拟

平⾯：

// 

创建平⾯

let

 normal 

=

new

 THREE

.

Vector3

(

0

,

1

,

0

);

// 

构建向量

let

 VirtualPlane 

=

new

 THREE

.

Plane

(

normal

,

0

);

// 

虚拟平⾯

2. 

创建好平⾯后，就是需要获取当前⿏标点击的位置，即⿏标点击与虚拟平⾯的交点：

/**

 * 

获取射线与平⾯相交的交点

 * @param {*} event

：⿏标点击事件

event

 * @returns

 */

function

getIntersects

(

event

)

{

let

 mouse 

=

new

 THREE

.

Vector2

();

    mouse

.

x 

=

(

event

.

clientX 

/

 window

.

innerWidth

)

*

2

-

1

;

    mouse

.

y 

=

-

(

event

.

clientY 

/

 window

.

innerHeight

)

*

2

+

1

;

let

 normal 

=

new

 THREE

.

Vector3

(

0

,

1

,

0

);

// 

创建平⾯

let

 VirtualPlane 

=

new

 THREE

.

Plane

(

normal

,

0

);

// 

从相机发出⼀条射线经过⿏标点击的位置

    raycaster

.

setFromCamera

(

mouse

,

 camera

);

// 

获取射线

let

 ray 

=

 raycaster

.

ray

;

// 

计算相机到射线的对象，可能有多个对象，返回⼀个数组，按照距离相机远近排列

let

 intersects 

=

 ray

.

intersectPlane

(

VirtualPlane

);

// 

返回向量

return

 intersects

;

}

3. 

拿到⿏标点击的焦点，存⼊对应的数组，然后绘制曲线：

let

 pointsArray 

=

[];

pointsArray

.

push

(

intersects

);

if

(

pointsArray

.

length